<template>
  <ty-plm-edit-grid
    :options="gridOptions"
    :rule="rule"
    v-if="tyPlmEditGridLogin"
    ref="baseTableRef"
    @checkbox-change="selectChangeEvent"
    @checkbox-all="selectChangeEvent"
    @edit-closed="handleEdit"
    class="ty-plm-edit-grid-emun"
  >
    <template #colorchart_default="{ data }">
      <colorCard :row="data.row" @handleChooseColor="handleChooseColor"></colorCard>
    </template>
    <template #dragIcon_default>
      <span class="drag-handler-craft">
        <em class="code-segment-drag iconfont icon-tuodong"></em>
      </span>
    </template>
    <template #statusIcon_default="{ data }">
      <div class="default-cell status-icon">
        <em :class="handleStatusIcon(data.row)"></em>
      </div>
    </template>

    <template #internalName_edit="{ data }" >
      <div v-if="data.row.noAdd" class="internalName_edit">{{ data.row.internalName }}</div>
      <ty-plm-input
        v-else
        v-model="data.row.internalName"
        @blur="data.valiItem(data.row, 'internalName', 'input', data.column), clearEdit()"
        @change="internalNameChange(data.row)"
      ></ty-plm-input>
    </template>
    <template #displayName_edit="{ data }" v-if="isChineseShow">
      <ty-plm-input
        v-model="data.row.displayName"
        style="width: calc(100% - 28px)"
        @change="handleDisplayChange($event, data.row)"
        @input="data.row.displayNamemainText = data.row.displayName"
      ></ty-plm-input>
      <int-popover
        metadefname="displayNamemainText"
        :row="data.row"
        :isEnum="true"
        metadefnameCn="displayNameCn"
        metadefnameEn="displayNameEn"
        @confirm="(mainText, list) => displayNameConfirm(mainText, list, data.row)"
      ></int-popover>
    </template>
    <template #description_edit="{ data }" v-if="isChineseShow">
      <ty-plm-input
        v-model="data.row.description"
        @change="handleDescriptionChange($event, data.row)"
        style="width: calc(100% - 28px)"
      ></ty-plm-input>
      <int-popover
        metadefname="descriptionmainText"
        :row="data.row"
        :isEnum="true"
        metadefnameCn="descriptionCn"
        metadefnameEn="descriptionEn"
        @confirm="(mainText, list) => descriptionConfirm(mainText, list, data.row)"
      ></int-popover>
    </template>
    <template #state_default="{ data }">
      <ty-plm-switch
        size="small"
        v-model="data.row.state"
        :needConfirm="false"
        :activeValue="'true'"
        :inactiveValue="'false'"
        @change="val => stateChange(data.row, val)"
      ></ty-plm-switch>
    </template>

    <template #serial_default="{ data }">
      <!-- // modify by cuiwb 2025/3/20 枚举管理ucd样式修改  -->
      <div
        class="show-num--class"
        :class="{
          'show-icon__current': visibleDropdownRowId == data.row.oid
        }"
      >
        <div class="show-icon">
          <div class="default-cell status-icon">
            <em :class="handleStatusIcon(data.row)"></em>
          </div>
          <ty-plm-dropdown
            v-bind="handleDropdownMenu"
            @handleVisibleChange="handleVisibleChange($event, data.row)"
            @command="val => handleToOptionsRow(val, data.row)"
            class="show-dropdown"
          >
            <template #insertUp="{ data }">
              <div class="dropdown-slot">
                <em :class="data.icon" class="lift-icon"></em>
                {{ data.label }}
                <ty-input-num-unit
                  style="margin: 0 4px"
                  v-model="insertToTopNum"
                  :options="{ width: 50, controls: false }"
                  @click.stop="() => {}"
                />
                {{ $t('label.line') }}
              </div>
            </template>
            <template #insertDown="{ data }">
              <div class="dropdown-slot">
                <em :class="data.icon" class="lift-icon"></em>
                {{ data.label }}
                <ty-input-num-unit
                  style="margin: 0 4px"
                  v-model="insertToBottomNum"
                  :options="{ width: 50, controls: false }"
                  @click.stop="() => {}"
                />
                {{ $t('label.line') }}
              </div>
            </template>
          </ty-plm-dropdown>
        </div>
        <span class="show-order">{{ getRowIndex(data.row) }}</span>
      </div>
    </template>
  </ty-plm-edit-grid>
</template>
<script setup>
import { managementEnumTable, useOverride } from './composables/management-enum-table';
// const { managementEnumTable } = window.tyRoot.getExportResource(
//   'src/modules/backend-mrg/business-module/enum-management/views/components/composables/management-enum-table.js'
// );
// const { useOverride } = window.tyRoot.getExportResource(
//   'src/modules/backend-mrg/business-module/enum-management/views/components/composables/management-enum-table.js'
// );
// import ColorCard from './color-card.vue';
const ColorCard = tyRoot.getExportResource('src/modules/backend-mrg/business-module/enum-management/views/components/color-card.vue').default;
// import intPopover from './int-popover.vue';
const intPopover = tyRoot.getExportResource('src/modules/backend-mrg/business-module/enum-management/views/components/int-popover.vue').default;
const emit = defineEmits(['updateDef']);
const props = defineProps({
  currentEnumRow: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
const {
  gridOptions,
  isChinese,
  rule,
  tableColumns,
  tyPlmEditGridLogin,
  handleToOptionsRow,
  handleDropdownMenu,
  insertToTopNum,
  insertToBottomNum,
  getRowIndex,
  baseTableRef,
  getTableList,
  handleStatusIcon,
  batchToAdd,
  handleInsertCopyRow,
  selectChangeEvent,
  clearEdit,
  isChineseShow,
  handleDisplayChange,
  // modify by cuiwb 2025/3/20 枚举管理ucd样式修改
  handleVisibleChange,
  visibleDropdownRowId,
  handleDescriptionChange,
  handleSearch,
  metaData,
  internalNameChange,
  handleEdit,
  displayNameConfirm,
  descriptionConfirm,
  handleChooseColor,
  stateChange
} = (useOverride || managementEnumTable)(emit, props);
defineExpose({
  isChinese,
  tableColumns,
  getTableList,
  batchToAdd,
  handleInsertCopyRow,
  baseTableRef,
  gridOptions,
  handleSearch,
  metaData
});
onMounted(() => {
  delete rule.value.internalName;
  console.log("🥒",rule);
});
</script>

<style scoped lang="scss">
// modify by cuiwb 2025/3/20 枚举管理ucd样式修改
.show-num--class {
  .show-icon {
    // modify by cuiwb 2025/4/30 修复枚举管理序号样式问题
    display: inline-flex !important;
    visibility: hidden;
    width: 0;
    align-items: center;
    em {
      color: var(--ty-ui-placeholder-color) !important;
      font-size: 14px !important;
    }
  }
  .show-dropdown {
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding-left: 8px;
  }
}
// modify by cuiwb 2025/3/20 枚举管理ucd样式修改
.row--hover,
.show-icon__current {
  .show-icon {
    visibility: unset;
    width: 100%;
  }

  .show-order {
    display: none !important;
  }
}
.dropdown-slot {
  display: flex;
  align-items: center;

  .lift-icon {
    padding-right: 9px;
  }
}
.status-icon {
  color: black;

  .iconfont {
    font-size: 14px;
  }
}
.code-segment-drag {
  cursor: grab;
  color: black;
  font-size: 14px;
}
.internalName_edit {
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style>
/* // modify by cuiwb 2025/3/20 枚举管理ucd样式修改  */
.ty-plm-edit-grid-emun {
  .col--checkbox {
    .vxe-cell {
      display: flex;
      justify-content: center;
    }
  }
  .vxe-cell:has(.delet-cell-enum) {
    position: relative;
    width: 100%;
    height: 100%;
    &:before {
      content: '';
      width: 100%;
      height: 1px;
      background: var(--ty-ui-common-border-color);
      position: absolute;
      left: 0;
      top: 50%;
    }
  }
}
</style>
